<template>
    <VCard title="我的空间">
      <template #append>
        <v-btn size="small" @click="visible = true">创建商品</v-btn>
      </template>
        <v-tabs class="mb-4" v-model="activeTab" color="primary">
            <v-tab v-for="(value,key) in tabs" :key="key" :value="value.tab">{{ value.title }}</v-tab>
        </v-tabs>
        <VWindow v-model="activeTab" class="mt-6 disable-tab-transition">
            <VWindowItem value="gallery">
              <tenantGallery />
            </VWindowItem>
            <VWindowItem value="goods">
              <tenantGoods />
            </VWindowItem>
        </VWindow>
    </VCard>
    <VDialog v-model="visible" max-width="1200px" @after-enter="getPodCategory()">
        <v-card title="请选择分类" style="height: 1000px;" v-loading="dialogLoading">
        <v-card-item>
          <v-item-group selected-class="bg-primary">
            <v-container>
              <v-row>
                <v-col v-for="category in categorys" :key="category.id" cols="12" md="4">
                  <v-item v-slot="{ selectedClass, toggle }">
                    <v-card :class="['d-flex align-center', selectedClass]" height="200" dark @click="selectCategory(category, toggle)">
                      <div class="text-h3 flex-grow-1 text-center">
                        {{ category.name }}
                      </div>
                    </v-card>
                  </v-item>
                </v-col>
              </v-row>
            </v-container>
          </v-item-group>
        </v-card-item>
      </v-card>
    </VDialog>



</template>


<script setup>
import tenantGallery from './components/tenantGallery.vue';
import tenantGoods from './components/tenantGoods.vue';
import { useRoute,useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter();
const visible = ref(false);
const dialogLoading = ref(false);
const categorys = ref([]);

const tab = computed({
  get: () => route.query.tab,
  set: () => route.query.tab,
})


const { proxy } = getCurrentInstance();

const activeTab = ref(tab.value||'gallery')

// 选中分类
async function selectCategory(category, fn) {
  fn();
  router.push({path:'tenant-center/goods/create',query:{id:category.id}})
}

// 获取分类列表
const getPodCategory = () =>{
  dialogLoading.value = true;
  getPodCategoryTenantSimple().then((categoryList) => {
    categorys.value = categoryList;
  }).finally(() => {
    dialogLoading.value = false;
});
}


const tabs = [
    {tab: 'gallery',title: '素材'},
    {tab: 'goods',title: '商品'},
]

</script>